<template>
  <main class="main-content">
    <h1 class="page-title">欢迎来到个人中心！</h1>
    <p class="page-description">
      在这里，您可以管理您的商城订单、查看您的宠物信息、调整个人设置等。
    </p>

    <!-- 功能卡片区域 -->
    <div class="feature-grid">
      <!-- 商城卡片 -->
      <div class="feature-card purple-card">
        <div class="card-header">
          <i class="icon-shopping-bag"></i>
          <h2>商城</h2>
        </div>
        <p class="card-description">浏览我们精选的宠物用品和食品。</p>
        <img
          src="../../assets/image/shop-image.png"
          alt="商城"
          class="card-image"
        />
        <a href="#/profile/mall" class="card-action">立即前往 →</a>
      </div>

      <!-- 我的订单卡片 -->
      <div class="feature-card blue-card">
        <div class="card-header">
          <i class="icon-order"></i>
          <h2>我的订单</h2>
        </div>
        <p class="card-description">查看您的历史订单和订单状态。</p>
        <img
          src="../../assets/image/order-image.png"
          alt="我的订单"
          class="card-image"
        />
        <a href="#/profile/order" class="card-action">查看详情 →</a>
      </div>

      <!-- 我的宠物卡片 -->
      <div class="feature-card green-card">
        <div class="card-header">
          <i class="icon-pet"></i>
          <h2>我的宠物</h2>
        </div>
        <p class="card-description">管理您的宠物信息，记录它们的成长。</p>
        <img
          src="../../assets/image/pet.png"
          alt="我的宠物"
          class="card-image"
        />
        <a href="#/profile/pets" class="card-action">管理宠物 →</a>
      </div>

      <!-- 设置卡片 -->
      <div class="feature-card yellow-card">
        <div class="card-header">
          <i class="icon-settings"></i>
          <h2>设置</h2>
        </div>
        <p class="card-description">更新您的个人资料和偏好设置。</p>
        <img
          src="../../assets/image/settings-image.png"
          alt="设置"
          class="card-image"
        />
        <a href="#/profile/settings" class="card-action">前往设置 →</a>
      </div>
    </div>
  </main>
</template>

<script setup>
// 可以在这里添加页面交互逻辑
</script>

<style lang="less" scoped>
/* 主内容区域样式 */
.main-content {
  flex: 1;
  padding: 30px 40px;
}

.page-title {
  color: #333;
  font-size: 24px;
  margin-bottom: 10px;
}

.page-description {
  color: #666;
  font-size: 15px;
  margin-bottom: 30px;
  line-height: 1.6;
}

/* 功能卡片网格 */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 25px;
}

/* 功能卡片样式 */
.feature-card {
  background-color: #fff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease;

  &:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
  }
}

.card-header {
  padding: 18px 20px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #f5f5f5;

  i {
    font-size: 22px;
    margin-right: 12px;
    color: inherit;
  }

  h2 {
    font-size: 18px;
    font-weight: 600;
    margin: 0;
  }
}

.card-description {
  padding: 15px 20px;
  margin: 0;
  color: #666;
  font-size: 14px;
  line-height: 1.5;
}

.card-image {
  width: 100%;
  height: 160px;
  object-fit: cover;
}

.card-action {
  display: block;
  text-align: center;
  padding: 12px 0;
  color: #8d26e6;
  font-weight: 500;
  font-size: 14px;
  text-decoration: none;
  border-top: 1px solid #f5f5f5;
  transition: color 0.3s ease;

  &:hover {
    color: #6a10b3;
  }
}

/* 卡片颜色主题 */
.purple-card {
  color: #8d26e6;
}

.blue-card {
  color: #2686e6;
}

.green-card {
  color: #26e68d;
}

.yellow-card {
  color: #e6c126;
}
</style>
